import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TextInput,
    Button
} from 'react-native';
import BaseComponentF from './BaseComponentF';
import Device from '../util/Device';
class FlexDemo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showTxt: 'ssss'
        };
    }
    render() {
        return (
            <View style={StyleP3.container}>
                <View style={StyleP3.view1}></View>
                <View style={StyleP3.view2}></View>
            </View>
        );
    }
}

export default BaseComponentF(FlexDemo, 'Flex布局学习');

const StyleP3 = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'green'
    },
    view1: {
        width: 100,
        height: 100,
        backgroundColor: 'red',
    },
    view2: {
        position: 'absolute',
        left: 50,
        top: 50,
        width: 100,
        height: 100,
        backgroundColor: 'blue',
    }
});

/** 
 * 练习2
*/
const StyleP2 = StyleSheet.create({
    container: {
        backgroundColor: '#deb887',
        width: undefined,
        height: 200,
        padding: 20
    },
    userNameView: {
        flexDirection: 'row',
    },
    pwView: {
        marginTop: 10,
        flexDirection: 'row',
    },
    keyName: {
        color: 'white',
        alignSelf: 'center',
        width: 70,
        textAlign: 'right',

    },
    userNameInput: {
        height: 45,
        width: 200,
        backgroundColor: '#ccc',
        padding: 0,
        paddingLeft: 10,
        marginLeft: 20,
        // textAlignVertical: 'top',
    },
    btn: {
        width: 90,
        height: 45
    },
    loginBtn: {
        width: 90,
        height: 45,
        marginLeft: 20,
    }
});

/** 
 * 练习1
*/
const StyleP1 = StyleSheet.create({
    container: {
        backgroundColor: 'darkred',
        width: undefined,
        height: 200,
        flexDirection: 'row',
        justifyContent: 'center',
        display: 'none',
    },
    middle: {
        marginLeft: 30,
        marginRight: 30,
        alignSelf: 'center',
        flexDirection: 'column'
    },
    goal: {
        fontSize: 25,
        color: 'white',
    },
    gameType: {
        alignSelf: 'center',
        fontSize: 10,
        color: 'white',
    },
    teamView: {
        alignSelf: 'center',
        width: 50
    },
    teamIv: {
        width: 50,
        height: 50,
    },
    teamName: {
        marginTop: 10,
        color: 'white',
        alignSelf: 'center',
    }
});

const Styles = StyleSheet.create({
    container: {
        flex: 1,
        display: 'none',
        backgroundColor: '#ccc',
    },
    horizontalStyle: {
        flex: 1,
        display: 'none',
        flexDirection: 'column',//设置主轴
        justifyContent: 'space-between',//设置主轴排列方式
        alignItems: 'flex-end',//设置次轴排列方式

    },
    horizontalItemStyle: {
        backgroundColor: 'red',
        width: 100,
        height: 100,
    },
    demo1: {
        width: 200,
        height: 200,
        top: 50,
        backgroundColor: 'blue',
        alignSelf: 'center',//设置自己在次轴上的排列方式
        borderBottomColor: 'red',
        borderBottomWidth: 1,
        borderLeftWidth: 2,
        borderLeftColor: 'red',
        borderRadius: 10,

        padding: 20,

    },
    demo2: {
        width: 200,
        height: 200,
        backgroundColor: 'blue',
        alignSelf: 'center',//设置自己在次轴上的排列方式
        borderBottomColor: 'red',
        borderBottomWidth: 1,
        borderLeftWidth: 2,
        borderLeftColor: 'red',
        borderRadius: 10,
        padding: 20,
        marginTop: -100,
        shadowColor: '#ccc',
        shadowOffset: { width: 230, height: 230 },
    }


});